<template>
  <view class="car-card-item">
		<!-- add -->
    <view class="type-add" v-if="carType === 'add'" @click.stop="handleAddCar">
      <ycy-camera-icon />
      <view class="type-add-title">拍摄<text class="type-add-title-important">行驶证</text>查询年检状态</view>
      <view class="type-add-extra">享年检到期查询、办理、提醒等功能</view>
    </view>
		<!-- expire -->
    <view class="type-expire" v-if="carType === 'expire'">
      <view class="car-info">
        <image v-if="carItem.brandModel === '凯迪拉克'" class="car-info-logo" src="@/static/image/cadilac_logo.png" mode="aspectFit" />
        <image v-else class="car-info-logo" src="@/static/image/andi_logo.png"  mode="aspectFit" />
        <view v-if="carItem.licensePlate" class="car-info-license-plate">{{ `${carItem.licensePlate.slice(0, 2)}:${carItem.licensePlate.slice(2)}` }}</view>
				<view class="car-info-register-date" >注册日期：{{ carItem.registerTime }}</view>
        <view class="car-info-status">
          <up-tag v-if="carItem.exemptStatus === 1" text="免上线年检" size="mini" plain plainFill />
          <up-tag v-else text="年检超期" size="mini" type="error" plain plainFill />
        </view>
      </view>
			<view v-if="showBtn" class="linear-btn" @click.stop="handleCarYearCheckBtn">办理年检</view>
      <view v-if="carItem.exemptStatus === 1" class="tip">请尽快<text class="tip-important-error">申领免检标</text></view>
      <view v-else class="tip">请尽快<text class="tip-important-error">办理年检</text></view>
      <image v-if="carItem.brandModel === '凯迪拉克'" class="car-model" src="@/static/image/cadilac.png" mode="aspectFit" />
      <image v-else class="car-model" src="@/static/image/audi_a4l.png" mode="aspectFit" />
    </view>
		<!-- unexpire -->
		<view class="type-expire" v-if="carType === 'unexpire'">
		  <view class="car-info">
		    <image v-if="carItem.brandModel === '凯迪拉克'" class="car-info-logo" src="@/static/image/cadilac_logo.png" mode="aspectFit" />
		    <image v-else class="car-info-logo" src="@/static/image/andi_logo.png"  mode="aspectFit" />
		    <view v-if="carItem.licensePlate" class="car-info-license-plate">{{ `${carItem.licensePlate.slice(0, 2)}:${carItem.licensePlate.slice(2)}` }}</view>
        <view class="car-info-register-date" >注册日期：{{ carItem.registerTime }}</view>
        <view class="car-info-status">
          <up-tag v-if="carItem.exemptStatus === 1" text="免上线年检" size="mini" plain plainFill />
          <up-tag v-else text="已年检" size="mini" plain plainFill />
        </view>
		  </view>
			<view v-if="carItem.exemptStatus === 1" class="tip">下次领免检标时间: <text class="tip-important-success">{{ carItem.nextCheckTime }}</text></view>
			<view v-else class="tip">下次年检时间: <text class="tip-important-success">{{ carItem.nextCheckTime }}</text></view>
		  <image v-if="carItem.brandModel === '凯迪拉克'" class="car-model" src="@/static/image/cadilac.png" mode="aspectFit" />
		  <image v-else class="car-model" src="@/static/image/audi_a4l.png" mode="aspectFit" />
		</view>
  </view>
</template>

<script setup>
  const props = defineProps({
    carType: {
      type: String,
      default: 'expire' // add, expire, unexpire 新增，年检到期，年检未到期1
    },
		carItem: {
			type: Object,
			default: {}
		},
    showBtn: {
      type: Boolean,
			default: true
    }
  });
	
	const handleCarYearCheckBtn = () => {
		uni.navigateTo({
      url: `/pages/index?indexPageActive=1&carId=${props.carItem.id}` //跳转门店页面
    })
	}
	
	const handleAddCar = () => {
		uni.navigateTo({
			url: '/pages/carCamera/carCamera'
		})
	}
</script>

<style lang="scss">
  .car-card-item {
    width: 100%;
    height: 200px;
    background-color: #eff8ff;
    border-radius: 12px;
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
    position: relative;
    overflow: hidden;
    padding: 16px 12px;
    box-sizing: border-box;
  }
  /* 创建浅灰色条纹效果 */
  .car-card-item::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: repeating-linear-gradient(/* 定义条纹的样式和间距 */ 120deg, #f5f5f5, #f5f5f5 16px, #e0e0e0 10px, #e0e0e0 20px);
    opacity: 0.3; /* 设置条纹的透明度 */
  }

  .type-add {
    position: relative;
    height: 100%;
    @include flex-column(center, center);

    &-title {
      font-size: $uni-font-size-lg;
      color: $uni-text-color;
      font-weight: bold;
      margin: 12px 0;

      &-important {
        color: $uni-color-primary;
      }
    }

    &-extra {
      font-size: $uni-font-size-base;
      color: $uni-text-color-grey;
    }
  }

  .type-expire {
    position: relative;
    height: 100%;
    color: $uni-text-color;
    // @include flex-column(center, center);
		
		.linear-btn {
			position: absolute;
			right: 0;
			top: 0;
			width: 80px;
		}

    .car-info {
      position: absolute;
      top: 0;
      left: 0;
      color: #333333;

      &-logo {
        max-height: 30px;
        max-width: 100px;
				margin-bottom: 6px;
      }

      &-license-plate {
        font-weight: bold;
        font-size: 24px;
        // margin-bottom: 12px;
      }

      &-register-date {
        margin-top: 6px;
        font-size: 14px;
        font-weight: bold;
      }

      &-status {
        margin-top: 6px;
        width: fit-content;
      }
    }

    .car-model {
      position: absolute;
      top: 50%;
      width: 50%;
      right: -8px;
      transform: translateY(-50%);
      height: 60%;
    }

    .tip {
      width: 100%;
			text-align: center;
      font-weight: bold;
      position: absolute;
      bottom: 0;
      left: 50%;
      transform: translateX(-50%);
      font-size: 15px;

      &-important-error {
        color: $uni-color-error;
      }
			
			&-important-success {
				color: $uni-color-primary;
			}
    }
  }
</style>
